import type { mapViewPropsType } from './typings'
import { defineComponent } from 'vue'
import { ElLoading } from 'element-plus'
// import { isPlainObject } from 'lodash'
import useVuexGetters from '~/hooks/useVuexGetters'
import useAMap from '~/hooks/useAMap'

export default defineComponent({
  name: 'MapView',
  props: ['id', 'clickon', 'marker', 'initCallback'],
  emits: ['selectAddressList', 'clickMarker'],
  setup(props: mapViewPropsType, { expose }) {
    // const store = useStore()
    // eslint-disable-next-line vue/no-setup-props-destructure
    const { id = 'map-init' } = props
    const loading = ElLoading.service({
      target: `#${id}`,
      lock: true,
      text: '加载中'
    })

    // 获取租户设置的坐标
    const getCurrentTenant = useVuexGetters('user', ['userAddressInfo'])

    const [mapRef, aMapRef] = useAMap(
      id,
      {
        // zooms: [6, 20], // 地图最大级别和最小级别设置
        zoom: 13 // 地图层级默认13
      },
      initAMap
    )

    // 初始化map事件
    function initAMap() {
      loading.close()
      props?.initCallback?.()
      mapRef.value.setCenter([
        getCurrentTenant.userAddressInfo.value.lon,
        getCurrentTenant.userAddressInfo.value.lat
      ]) // 设置地图的中心点
    }

    expose({ mapRef, aMapRef })
    return () => <section id={id}></section>
  }
})
